<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" conte nt="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">
    <h2>名称：{{name}}</h2>
    <h2>地址：{{address}}</h2>
  </div>
  <script>
    Vue.config.productionTip = false
    let data = {
      name:'jack',
        address:'四川',
    }
    //创建vue实例
    const vm = new Vue({
      el:'#root', //el用于指定当前vue实例为拿个容器服务，值通常为css选择器
      data
    })
    //vm.name通过数据代理访问到了data里面的name，通过了getter方法(也就是Object.defineProperty里面的get方法)
    //vm.data = xxx 通过Object.defineProperty里面的set方法，修改了vm里面的_data对象，而这个——data对象就是所定义的data，于是乎发生了数据劫持
  </script>
</body>
</html>
